<template>
    <div id="delivery-manager">
      <i-tabs :current="current" @change="handleChange" fixed color="#41B962">
          <i-tab key="tab1" title="全部">
          </i-tab>
          <i-tab key="tab2" title="待派送"></i-tab>
          <i-tab key="tab3" title="派送中"></i-tab>
          <i-tab key="tab4" title="已完成"></i-tab>
        </i-tabs>
        <p v-if="deliveryList.length < 0" class="tc f14" style="margin-top: 45px;">您还未有任何的派单！！！</p>
      <div class="mt50 pl13-pt13">
          <ul v-if="current === 'tab1'"
          >
            <li v-for="orders in deliveryList" :key="orders.index">
              <header @click="deliveryDetails(orders)" class="pl13-pt13"><p class="f14">{{orders.orderId}}</p><p class="tr f12" style="color: #F95318;">{{orders.deliverStatus}}</p></header>
              <dl class="pl13-pt13">
                <dd>
                  <span class="iconfont f18" style="color: #22B14A; line-height: 21px;">&#xe609;</span>
                  <p>导航</p>
                </dd>
                <dd>
                  <span class="f14" style="color: #FEAB2B;">{{orders.deliverDistance}}KM</span>
                  <p>配送距离</p>
                </dd>
                <dd style="border-color: #fff;">
                  <span style="color: #747474;" class="f14">{{orders.deliverTime}}</span>
                  <p>下单时间</p>
                </dd>
              </dl>
              <main class="pl13-pt13">
                <i class="iconfont">&#xe651;</i>
                <section class="pl10 pt15 pb15">
                  <h2 class="f14" style="color: #646464">{{orders.deliverStoreName}}</h2>
                  <p class="f12 pt5" style="color: #898989">{{orders.deliverStoreAddr}}</p>
                </section>
              </main>
              <div>
                <p class="button" style="border-right: 1px solid #ececec; color: #FEAB2B" v-if="orders.deliverStoreStatus === '立即配送'">{{orders.deliverStoreStatus}}</p>
                <p class="button" style="border-right: 1px solid #ececec;" v-else-if="orders.deliverStoreStatus === '提交完成'">{{orders.deliverStoreStatus}}</p>
                <p disabled class="button" style="border-right: 1px solid #ececec; color: #A2A2A2" v-else>{{orders.deliverStoreStatus}}</p>
                <p>拨打电话</p>
              </div>
            </li>
          </ul>
          <ul v-else-if="current === 'tab2'">
            <li v-for="orders in deliveryList" :key="orders.index" v-if="orders.deliverStatus === '待派送'">
              <header @click="deliveryDetails(orders)" class="pl13-pt13"><p class="f14">{{orders.orderId}}</p><p class="tr f12" style="color: #F95318;">{{orders.deliverStatus}}</p></header>
              <dl class="pl13-pt13">
                <dd>
                  <span class="iconfont f18" style="color: #22B14A; line-height: 21px;">&#xe609;</span>
                  <p>导航</p>
                </dd>
                <dd>
                  <span class="f14" style="color: #FEAB2B;">{{orders.deliverDistance}}KM</span>
                  <p>配送距离</p>
                </dd>
                <dd style="border-color: #fff;">
                  <span style="color: #747474;" class="f14">{{orders.deliverTime}}</span>
                  <p>下单时间</p>
                </dd>
              </dl>
              <main class="pl13-pt13">
                <i class="iconfont">&#xe651;</i>
                <section class="pl10 pt15 pb15">
                  <h2 class="f14" style="color: #646464">{{orders.deliverStoreName}}</h2>
                  <p class="f12 pt5" style="color: #898989">{{orders.deliverStoreAddr}}</p>
                </section>
              </main>
              <div>
                <p class="button" style="border-right: 1px solid #ececec; color: #FEAB2B">{{orders.deliverStoreStatus}}</p>
                <p>拨打电话</p>
              </div>
            </li>
          </ul>
          <ul v-else-if="current === 'tab3'">
            <li v-for="orders in deliveryList" :key="orders.index" v-if="orders.deliverStatus === '派送中'">
              <header @click="deliveryDetails(orders)" class="pl13-pt13"><p class="f14">{{orders.orderId}}</p><p class="tr f12" style="color: #F95318;">{{orders.deliverStatus}}</p></header>
              <dl class="pl13-pt13">
                <dd>
                  <span class="iconfont f18" style="color: #22B14A; line-height: 21px;">&#xe609;</span>
                  <p>导航</p>
                </dd>
                <dd>
                  <span class="f14" style="color: #FEAB2B;">{{orders.deliverDistance}}KM</span>
                  <p>配送距离</p>
                </dd>
                <dd style="border-color: #fff;">
                  <span style="color: #747474;" class="f14">{{orders.deliverTime}}</span>
                  <p>下单时间</p>
                </dd>
              </dl>
              <main class="pl13-pt13">
                <i class="iconfont">&#xe651;</i>
                <section class="pl10 pt15 pb15">
                  <h2 class="f14" style="color: #646464">{{orders.deliverStoreName}}</h2>
                  <p class="f12 pt5" style="color: #898989">{{orders.deliverStoreAddr}}</p>
                </section>
              </main>
              <div>
                <p class="button" style="border-right: 1px solid #ececec;">{{orders.deliverStoreStatus}}</p>
                <p>拨打电话</p>
              </div>
            </li>
          </ul>
          <ul v-else>
            <li v-for="orders in deliveryList" :key="orders.index" v-if="orders.deliverStatus === '已完成'">
              <header @click="deliveryDetails(orders)" class="pl13-pt13"><p class="f14">{{orders.orderId}}</p><p class="tr f12" style="color: #F95318;">{{orders.deliverStatus}}</p></header>
              <dl class="pl13-pt13">
                <dd>
                  <span class="iconfont f18" style="color: #22B14A; line-height: 21px;">&#xe609;</span>
                  <p>导航</p>
                </dd>
                <dd>
                  <span class="f14" style="color: #FEAB2B;">{{orders.deliverDistance}}KM</span>
                  <p>配送距离</p>
                </dd>
                <dd style="border-color: #fff;">
                  <span style="color: #747474;" class="f14">{{orders.deliverTime}}</span>
                  <p>下单时间</p>
                </dd>
              </dl>
              <main class="pl13-pt13">
                <i class="iconfont">&#xe651;</i>
                <section class="pl10 pt15 pb15">
                  <h2 class="f14" style="color: #646464">{{orders.deliverStoreName}}</h2>
                  <p class="f12 pt5" style="color: #898989">{{orders.deliverStoreAddr}}</p>
                </section>
              </main>
              <div>
                <p disabled class="button" style="border-right: 1px solid #ececec; color: #A2A2A2">{{orders.deliverStoreStatus}}</p>
                <p>拨打电话</p>
              </div>
            </li>
          </ul>
          <p class="f12 tc pt20 pb10" style="color: #A2A2A2">我们也是有底线的</p>
        </div>
      <footer>
        <dl>
          <dd @click="doThis(navbars)" v-for="(navbars, key) in navBar" :key="navbars.index" :class="{active: select === navbars.id}" style="display: flex; align-items: center; justify-content: center;">
            <div>
              <i class="iconfont">{{navbars.text}}</i>
              <p>{{navbars.name}}</p>
            </div>
          </dd>
        </dl>
      </footer>
      <i-drawer :visible="showLeft1" @close="toggleLeft1">
        <view class="demo-container">
          <header class="pl13-pt13 pt10">
            <img src="../img/user_top.jpg"/>
            <section class="pl10">
              <p class="f18">夏一天(186****1675)</p>
              <p class="f13 pt5">编号：9527</p>
            </section>
          </header>
          <main class="mb5">
            <i-cell title="更换手机号" is-link>
              <i-icon type="shoujihao" slot="iconfont" size="24" color="#F38F14" />
            </i-cell>
            <i-cell title="修改密码" is-link>
              <i-icon type="peisong-xiugaimima" slot="iconfont" size="24" color="#567FF6" />
            </i-cell>
            <i-cell title="推广二维码" is-link>
              <i-icon type="iconfonterweima" slot="iconfont" size="24" color="#41B962" />
            </i-cell>
            <div class="mt10">
              <i-cell title="退出" is-link>
                <i-icon type="peisong-tuichu" slot="iconfont" size="24" color="#FF995F" />
              </i-cell>
            </div>
          </main>
        </view>
      </i-drawer>
    </div>
</template>

<script type="ECMAScript 6">
    export default {
        name: 'delivery-manager',
        data () {
            return {
                current: 'tab1',
                showLeft1: false,
                loading: false,
                position: 'left',
                select: 1,
                navBar: [
                    {id: 1, text: '', name: '订单'},
                    {id: 2, text: '', name: '推荐商家'},
                    {id: 3, text: '', name: '我的'}
                    ],
                //  配送列表项
                deliveryList: [
                    {id: 1, orderId: 'M525549501188', deliverStatus: '待派送', deliverDistance: 12, deliverTime: '10.15 18:05', deliverStoreName: '重庆小龙坎火锅店 (夏一天)', deliverStoreAddr: '贵州省 贵阳市 南明区 花果园社区服务中心 花果园M区10栋108号', deliverStoreStatus: '立即配送'},
                    {id: 2, orderId: 'M525529501186', deliverStatus: '派送中', deliverDistance: 5, deliverTime: '10.15 18:87', deliverStoreName: '重庆小龙坎火锅店 (夏一天)', deliverStoreAddr: '贵州省 贵阳市 南明区 花果园社区服务中心 花果园M区10栋108号', deliverStoreStatus: '提交完成'},
                    {id: 3, orderId: 'M525529501186', deliverStatus: '已完成', deliverDistance: 78, deliverTime: '10.15 14:05', deliverStoreName: '重庆小龙坎火锅店 (夏一天)', deliverStoreAddr: '贵州省 贵阳市 南明区 花果园社区服务中心 花果园M区10栋108号', deliverStoreStatus: '配送完成'},
                    {id: 4, orderId: 'M525529501178', deliverStatus: '派送中', deliverDistance: 58, deliverTime: '10.15 17:05', deliverStoreName: '重庆小龙坎火锅店 (夏一天)', deliverStoreAddr: '贵州省 贵阳市 南明区 花果园社区服务中心 花果园M区10栋108号', deliverStoreStatus: '提交完成'}
                ]
            };
        },
        methods: {
              toggleLeft1 () {
                this.showLeft1 = true;
              },
              handleChange (el) {
                this.current = el.mp.detail.key;
              },
             loadMore () {
                this.loading = true;
                setTimeout(() => {
                this.loading = false;
                }, 2500);
            },
            doThis (index) {
               if (index.id === 3) {
                 this.showLeft1 = true;
                 this.select = index.id;
               }
              this.select = index.id;
            },
            deliveryDetails (orders) {
              let url = './deliver-details/main?id=' + JSON.stringify(orders);
              mpvue.navigateTo({ url });
            }
        },
        created () {
        }
    };
</script>

<style lang="stylus" scoped>
    #delivery-manager
      padding-bottom 55px;
      ul
          li
              margin-bottom 5px; background #fff;
              header
                  display flex; align-items center;line-height 40px; height 40px; border-bottom 1px solid #ececec;
                  p
                    flex 1;
              dl
                  display flex; align-items center; height 56px; border-bottom 1px solid #ececec;
                  dd
                      flex 1; border-right 1px solid #ececec;
                      span
                          display block; text-align center;
                      p
                          font-size 12px; color #A5A5A5; text-align center;
              main
                   display flex;  align-items center;border-bottom 1px solid #ececec;
                   i
                      display inline-block; width 32px; height 30px; border 2px solid #FD9E27; border-radius 50%; line-height 30px; color #FD9E27; text-align center;
                   section
                        flex 1; padding-right 19%;
              &>div
                  display flex; align-items center; height 44px;
                  p
                     flex 1; height 36px; text-align center; font-size 15px; color #22B14A; line-height 36px;
        footer
            position fixed; left 0; bottom 0; height 48px; width 100%; background #fff;
            dl
                display flex; align-items center; height 48px;
                dd
                    flex 1;
                    i
                      display block; font-size 22px; text-align center;
                    p
                       margin-top -4%;  text-align center; font-size 12px;
                .active
                    i, p
                      color #25ca3f;
    .demo-container
      width:80vw; height: 100vh; background #F3F4F6;
      header
        display flex;align-items center; height 150px; background url("") no-repeat center; color #fff;
        img
          height 70px; width 70px; border-radius 50%; border 2px solid #fff;

</style>
